import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class OrientationBuilderPage extends StatelessWidget {
  const OrientationBuilderPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("方向监听示例")),
      body: OrientationBuilder(
        builder: (context, orientation) {
          // 判断当前方向
          final isPortrait = orientation == Orientation.portrait;

          // 模拟的数据
          final items = List.generate(20, (index) => 'Item ${index + 1}');

          return Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              children: [
                // 显示当前方向
                Row(
                  children: [
                    const Icon(Icons.screen_rotation),
                    const SizedBox(width: 8),
                    Text(
                      isPortrait ? '当前是竖屏' : '当前是横屏',
                      style: const TextStyle(fontSize: 18),
                    ),
                  ],
                ),
                const SizedBox(height: 16),

                // 根据方向展示不同布局
                Expanded(
                  child: isPortrait
                      ? ListView.separated(
                    itemCount: items.length,
                    itemBuilder: (context, index) => ListTile(
                      leading: const Icon(Icons.star),
                      title: Text(items[index]),
                    ),
                    separatorBuilder: (_, __) => const Divider(),
                  )
                      : GridView.builder(
                    gridDelegate:
                    const SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 3,
                      mainAxisSpacing: 10,
                      crossAxisSpacing: 10,
                      childAspectRatio: 1.5,
                    ),
                    itemCount: items.length,
                    itemBuilder: (context, index) => Container(
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                        color: Colors.teal[100 * ((index % 8) + 1)],
                        borderRadius: BorderRadius.circular(12),
                      ),
                      child: Text(
                        items[index],
                        style: const TextStyle(fontWeight: FontWeight.bold),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}
